<html>
	<head>
		<title></title>
	</head>
	<body>
		<ul id = "rollList" type="disc">
			<li>1111111</li>
			<li>2222222</li>
			<li>3333333</li>
			<li>4444444</li>
			<li>5555555</li>
			<li>6666666</li>
			<li>7777777</li>
			<li>8888888</li>
			<li>9999999</li>
			<li>0000000</li>
		</ul>  

	</body>
	
	<script>
		console.log("脚本开始执行");
		var liList = document.getElementsByTagName("li");
		var liCount = liList.length;
		console.log(liCount);
		
		var curSelected = 0;
		
		var setCurSelected = function(index){
			for(let i = 0; i < liCount; i++){
				liList[i].style.color = "black";
				liList[i].style.backgroundColor = "grey";
			}
			liList[index].style.color = "white";
			liList[index].style.backgroundColor = "#000000";
		}
		
		setCurSelected(curSelected);
		
		document.addEventListener("keydown", function(event){
			console.log(event.keyCode);
			switch(event.keyCode){
				case 38:
					curSelected--;
					if(curSelected < 0){
						curSelected = liCount - 1;
					}
					break;
				case 40:
					curSelected++;
					if(curSelected > liCount - 1){
						curSelected = 0;
					}
					break;
			}
			setCurSelected(curSelected);
		});
		
	</script>
</html>